<template>
  <el-card class="box-card">
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item  label="一级分类" class="mr">
        <el-select v-model="formId.Category1Id" placeholder="请选择" @change="Category1Change" :disabled="!popup">
          <el-option v-for="cate1 in Category1List" :key="cate1.id" :label="cate1.name" :value="cate1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" class="mr">
        <el-select v-model="formId.Category2Id" placeholder="请选择" @change="Category2Change" :disabled="!popup">
          <el-option v-for="cate2 in Category2List" :key="cate2.id" :label="cate2.name" :value="cate2.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select  placeholder="请选择" v-model="formId.Category3Id" @change="Category3Change" :disabled="!popup">
          <el-option v-for="cate3 in Category3List" :key="cate3.id" :label="cate3.name" :value="cate3.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import Pubsub from 'pubsub-js'
export default {
    name:'CategorySelector',
    props:['CategoryInfo','popup'],
    data(){
        return{
            formId: {
          Category1Id: '',
          Category2Id: '',
          Category3Id: ''
        }
        }
    },
    methods:{
        ...mapActions('CategorySelector',['Category1Actions','Category2Actions','Category3Actions']),
        Category1Change(e){
            this.formId.Category1Id = e
            this.Category2Actions(e)
            this.formId.Category2Id = ''
            this.formId.Category3Id = ''
        },
        Category2Change(e){
            this.formId.Category2Id = e
            this.Category3Actions(e)
            this.formId.Category3Id = ''
            
        },
        Category3Change(e){
            this.formId.Category3Id = e
            this.$emit('CategoryInfo',this.formId)
        },
    },
    computed:{
        ...mapState({
            Category1List:state => state.CategorySelector.Category1List,
            Category2List:state => state.CategorySelector.Category2List,
            Category3List:state => state.CategorySelector.Category3List,
        })
    },
    mounted(){
        this.Category1Actions()
    }
};
</script>

<style></style>
